import { Button, Image, Dropdown, Space, Form, Input } from "antd";
import {
  EllipsisOutlined,
  EditOutlined,
  DeleteOutlined,
} from "@ant-design/icons";
import CommonPage from "@/components/page/CommonPage";
import Add from "@/components/svg/action-slot-icon/Add";
import styled from "styled-components";
import { useEffect, useState } from "react";
import { deletePage, getPages, saveOrUpdatePage } from "@/api/pages";
import useCRUD from "@/hooks/useCRUD";
import CrudModal from "@/components/table/CrudModal";
import UploadOne from "@/components/upload/UploadOne";

const Styled = styled.div`
  .container {
    flex-wrap: wrap;
  }
  .item {
    position: relative;
    width: 300px;
    border-radius: 5px;
    overflow: hidden;
    &:nth-child(n + 5) {
      margin-top: 5px;
    }
    &:not(:nth-child(5n + 1)) {
      margin-left: 25px;
    }

    p {
      text-align: center;
      font-size: 15px;
    }
    .dropdown {
      position: absolute;
      z-index: 99;
      right: 10px;
      top: 5px;
    }
  }
`;

const Page = () => {
  const {
    modalVisible,
    setModalVisible,
    modalTitle,
    modalLoading,
    setModalLoading,
    handleAdd,
    handleDelete,
    handleEdit,
    handleSave,
    modalForm,
    setModalForm,
    modalFormRef,
    clearFormFields,
  } = useCRUD({
    name: "页面",
    refresh: fetchData,
    doCreate: saveOrUpdatePage,
    doUpdate: saveOrUpdatePage,
    doDelete: deletePage,
  });

  const [pageList, setPageList] = useState([]);

  async function fetchData() {
    const res = await getPages();
    res.code === 0 && setPageList(res.data);
  }

  function handleSelect(key, page) {
    if (key === "edit") {
      handleEdit(page);
    } else if (key === "delete") {
      handleDelete([page.id]);
    }
  }
  function UpdateFormModel(nVal) {
    setModalForm({ ...modalForm, ...nVal });
    //特殊处理，图片上次成功后，回显内容
    modalFormRef.setFieldValue("cover", nVal.img);
  }

  useEffect(() => {
    fetchData();
  }, []);
  return (
    <Styled>
      <CommonPage title="页面管理">
        <div className="action-slot" slot="action">
          <Button type="primary" icon={<Add />} onClick={handleAdd}>
            新增页面
          </Button>
        </div>
        <div className="flex container">
          {pageList.map((item) => {
            return (
              <div key={item.id} className="item">
                <Dropdown
                  className="dropdown"
                  menu={{
                    items: [
                      {
                        key: "edit",
                        label: (
                          <span onClick={handleSelect.bind(null, "edit", item)}>
                            编辑
                          </span>
                        ),
                        icon: <EditOutlined />,
                      },
                      {
                        key: "delete",
                        label: (
                          <span
                            onClick={handleSelect.bind(null, "delete", item)}
                          >
                            删除
                          </span>
                        ),
                        icon: <DeleteOutlined />,
                      },
                    ],
                  }}
                  placement="bottomLeft"
                >
                  <EllipsisOutlined
                    style={{ fontSize: "30px", color: "white" }}
                  />
                </Dropdown>
                <Image
                  className="image"
                  width={300}
                  height={170}
                  src={item.cover}
                  fallback="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                />
                <p>{item.name}</p>
              </div>
            );
          })}
        </div>
        <CrudModal
          visible={modalVisible}
          setModalVisible={setModalVisible}
          loading={modalLoading}
          title={modalTitle}
          width={550}
          handleSave={handleSave}
          clearFormFields={clearFormFields}
        >
          <Form
            form={modalFormRef}
            name="add-page"
            labelCol={{
              span: 4,
            }}
            wrapperCol={{
              span: 20,
            }}
            initialValues={{
              ...modalForm,
            }}
          >
            <Form.Item
              label="页面名称"
              name="name"
              rules={[{ required: true, message: "请输入页面名称" }]}
            >
              <Input placeholder="请输入页面名称" />
            </Form.Item>
            <Form.Item
              label="页面标签"
              name="label"
              rules={[{ required: true, message: "请输入页面标签" }]}
            >
              <Input placeholder="请输入页面标签" />
            </Form.Item>
            <Form.Item label="页面封面">
              <UploadOne
                preview={modalForm.cover}
                UpdateFormModel={UpdateFormModel}
              />
            </Form.Item>
            <Form.Item label="封面链接" name="cover">
              <Input.TextArea
                rows={4}
                placeholder="图片上传成功自动生成，或者直接复制外链"
              />
            </Form.Item>
          </Form>
        </CrudModal>
      </CommonPage>
    </Styled>
  );
};

export default Page;
